<template>
  <div class="root">
     <el-table
    :data="tableData"
    border
    style="width: 70%">
    <el-table-column
      prop="id"
      label="编号"
      width="120">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="120">
    </el-table-column>
    <el-table-column
      prop="author"
      label="作者"
      width="120">
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
      width="100">
      <template slot-scope="scope">
        <el-button @click="edit(scope.row)" type="text" size="small">修改</el-button>
        <el-button @click="deleteBook(scope.row)"  type="text" size="small">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

    <el-pagination
    background
    layout="prev, pager, next"
    :page-size=6
    :total="total"
    @current-change="page">
    </el-pagination>
  </div>
</template>

<script>
import axios from "axios"

export default {
    name: 'PageOne',
    methods: {
      edit(row){
        this.$router.push({
          path: '/update',
          query: {
            id: row.id,
          }
        })
      },
      deleteBook(row){
        const _this = this
        axios.delete('http://localhost:81/book/deleteById/'+row.id).then(function(rep) {
          // alert('添加成功')
                  _this.$alert('《' + row.name + '》删除成功！', '消息', {
                    confirmButtonText: '确定',
                    callback: action => {
                      // _this.$router.push('/BookManager')
                      window.location.reload()
                  }
                });
        })
      },
      handleClick(row) {
        console.log(row);
      },
      page(currentchange) {
        const _this = this 
        axios.get('http://localhost:81/book/findAll/'+currentchange+'/6').then(function(rep) {
          _this.tableData = rep.data.content 
          _this.total = rep.data.totalElements 
        })
      }
    },
    created() {
      const _this = this 
      axios.get('http://localhost:81/book/findAll/1/6').then(function(rep) {
        _this.tableData = rep.data.content 
        _this.total = rep.data.totalElements 
      })
    },
    data() {
      return {
        total: null,
        tableData: null,
      }
    }
}
</script>

<style>

</style>